<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				background-color: #000;
			}
			.box {
				position: fixed;
				width: 100%;
				height: 100vh;
				background-image: url('https://img1.baidu.com/it/u=2131380303,2982845453&fm=26&fmt=auto&gp=0.jpg');
				background-size: cover;
				background-repeat: no-repeat;
				clip-path: circle(100px at var(--x) var(--y));
			}
			.box:active {
				clip-path: circle(200px at var(--x) var(--y));
				/* clip-path: path(
					'M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z'
				); */
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script>
			let pos = document.documentElement;
			pos.addEventListener('mousemove', e => {
				pos.style.setProperty('--x', e.clientX + 'px');
				pos.style.setProperty('--y', e.clientY + 'px');
			});
		</script>
	</body>
</html>
